<template>
  <div>
    <el-tag effect="dark" class="my-tag">
      <svg width="20" height="20" style="margin-bottom: -3px">
        <use xlink:href="#icon-aixin"/>
      </svg>
      爱情小屋
    </el-tag>
    <el-form
      :model="family"
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
    >

      <el-form-item label="男生名称" prop="manName">
        <el-input maxlength="30" v-model="family.manName"></el-input>
      </el-form-item>

      <el-form-item label="男生头像" prop="manCover">
        <div style="display: flex">
          <el-input v-model="family.manCover" disabled></el-input>
          <el-image
            class="table-td-thumb"
            lazy
            style="margin-left: 10px"
            :preview-src-list="[family.manCover]"
            :src="family.manCover"
            fit="cover"
          ></el-image>
        </div>
        <uploadPicture
          :isAdmin="true"
          :prefix="'manCover'"
          style="margin-top: 10px"
          @addPicture="addManCover"
          :maxSize="1"
          :maxNumber="1"
        ></uploadPicture>
      </el-form-item>

      <el-form-item label="女生名称" prop="womanName">
        <el-input maxlength="30" v-model="family.womanName"></el-input>
      </el-form-item>

      <el-form-item label="女生头像" prop="womanCover">
        <div style="display: flex">
          <el-input v-model="family.womanCover" disabled></el-input>
          <el-image
            class="table-td-thumb"
            lazy
            style="margin-left: 10px"
            :preview-src-list="[family.womanCover]"
            :src="family.womanCover"
            fit="cover"
          ></el-image>
        </div>
        <uploadPicture
          :isAdmin="true"
          :prefix="'womanCover'"
          style="margin-top: 10px"
          @addPicture="addWomanCover"
          :maxSize="1"
          :maxNumber="1"
        ></uploadPicture>
      </el-form-item>

      <el-form-item label="相遇时间" prop="startDate">
        <el-date-picker
          v-model="family.startDate"
          type="date"
          placeholder="选择日期"
          align="right"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="是否启用" prop="status">
        <el-tag :type="family.status === false ? 'danger' : 'success'" disable-transitions>
          {{ family.status === false ? "否" : "是" }}
        </el-tag>
        <el-switch v-model="family.status"></el-switch>
      </el-form-item>
    </el-form>
    <div class="myCenter" style="margin-bottom: 22px">
      <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      <el-button type="danger" @click="resetForm('ruleForm')">重置所有修改</el-button>
    </div>
  </div>
</template>

<script>
const uploadPicture = () => import("../../common/uploadPicture.vue");

export default {
  components: {
    uploadPicture,
  },
  data() {
    return {
      family: {
        id: null,
        manCover: "",
        womanCover: "",
        manName: "",
        womanName: "",
        startDate: null,
        status: null,
      },
      rules: {
        manCover: [
          {required: true, message: "请上传男生头像", trigger: "change"},
        ],
        womanCover: [
          {required: true, message: "请上传女生头像", trigger: "change"},
        ],
        manName: [
          {required: true, message: "请输入男性名称", trigger: "change"},
        ],
        womanName: [
          {required: true, message: "请输入女性名称", trigger: "change"},
        ],
        startDate: [
          {required: true, message: "请选择相遇时间", trigger: "change"},
        ],
        status: [
          {required: true, message: "请选择是否启用", trigger: "change"},
        ]
      },
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    };
  },

  computed: {},

  watch: {},

  created() {
    this.getFamilyInfo();
  },

  mounted() {

  },

  methods: {
    getFamilyInfo() {
      this.$createHttp.familyInfo().then((res) => {
        if (res.code === 200) {
          this.family = res.data;
        }
      })
    },
    addManCover(res) {
      this.family.manCover = res.path;
    },
    addWomanCover(res) {
      this.family.womanCover = res.path;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.family.id){
            this.$createHttp.updateFamily(this.family).then((res) => {
              if (res.code === 200) {
                this.$message({
                  message: "保存成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            })
          }else {
            this.$createHttp.addFamily(this.family).then((res) => {
              if (res.code === 200) {
                this.$message({
                  message: "保存成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            })
          }

        } else {
          this.$message({
            message: "请完善必填项！",
            type: "error",
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getFamilyInfo();
    },
  },
};
</script>

<style scoped>
.my-tag {
  margin-bottom: 20px;
  width: 100%;
  text-align: left;
  background: var(--lightYellow);
  border: none;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: var(--black);
}

.table-td-thumb {
  border-radius: 2px;
  width: 40px;
  height: 40px;
}
</style>
